/*
 * @Author: fhw
 * @Date: 2022-05-03 11:23:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-14 14:39:41
 * @Description: 表情包
 */

import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
import { SmileOutlined } from '@ant-design/icons-vue'
import './index.scss'
import { equals } from 'ramda'
import { emojiList } from '@/utils/emojis'
const props = {
	fontSize: {
		type: Number as PropType<number>,
		default: () => 20,
	},
	direction: {
		type: String as PropType<'top' | 'bottom'>,
		default: 'top',
	},
} as const
export default defineComponent({
	props,
	emits: ['sendEmotion'],
	setup(props, { emit }) {
		const isShow = ref<boolean>(false)
		function sendEmotion(data: string) {
			emit('sendEmotion', data)
			isShow.value = false
		}
		const emotion = ref()
		onMounted(() => {
			// 全局点击事件
			document.addEventListener('mouseup', (e) => {
				if (emotion.value) {
					// 判断鼠标点击的区域是否在tree里面，否则关闭弹窗
					if (!emotion.value.contains(e.target)) {
						isShow.value = false
					}
				}
			})
		})
		const emojis = computed(() => {
			const objNew = []
			for (const i in emojiList.emojis) {
				objNew.push({ key: emojiList.emojis[i], value: i })
			}
			return objNew
		})
		return () => (
			<div>
				<div id="emotion" ref={emotion}>
					<a-tooltip
						placement={props.direction ? 'bottom' : 'top'}
						title="表情"
						mouseEnterDelay={0.5}
						mouseLeaveDelay={0.1}
					>
						<SmileOutlined
							style={{ fontSize: `${props.fontSize}px`, cursor: 'pointer' }}
							onClick={() => {
								isShow.value = !isShow.value
							}}
						/>
					</a-tooltip>
					<ul
						class={['emotion_box', equals(props.direction, 'top') ? 'directionTop' : 'directionBottom']}
						style={{ display: isShow.value ? 'flex' : 'none' }}
						onSelect={() => false}
					>
						{emojiList.symbol.map((item) => {
							return <li onClick={() => sendEmotion(item)}>{item}</li>
						})}
						{emojis.value.map((item) => {
							return <li onClick={() => sendEmotion(item.value)} v-html={item.key}></li>
						})}
					</ul>
				</div>
			</div>
		)
	},
})
